<template>
  <svg aria-hidden="true" :class="_class" :style="'width:' + size + 'px' + ';height:' + size + 'px'">
    <use :xlink:href="symbolId" :fill="color" />
  </svg>
</template>

<script setup lang="ts">
export interface IconProps {
  prefix?: string // icon前缀
  icon: string // icon名称
  className?: string // 样式
  color?: string
  hoverColor?: string
  size?: number | string
}
// props 默认值
const props = withDefaults(defineProps<IconProps>(), {
  prefix: 'icon',
  icon: '',
  color: '',
  className: '',
  size: 16
})
const symbolId = computed(() => `#${props.prefix}-${props.icon}`)
const _class = computed(() => (props.className ? `svg-icon ${props.className}` : 'svg-icon'))
</script>

<style scoped>
.svg-icon {
  display: inline-block;
  width: 1em;
  height: 1em;
  overflow: hidden;
  vertical-align: -0.15em;
  outline-style: none;
  fill: currentcolor;
}
</style>
